<!DOCTYPE html>
<html>
<head>
  <title>Hello World in Etro</title>
  <script src="../../dist/etro-iife.js"></script>
</head>
<body>
  <script>
    window.addEventListener('load', () => {
      const canvas = document.createElement('canvas')
      document.body.appendChild(canvas)

      const video = document.createElement('video')
      video.src = '../assets/beach.mp4'

      window.onclick = () => {
        canvas.width = video.videoWidth // you could also do movie.width = video.videoWidth;
        canvas.height = video.videoHeight
        const movie = new etro.Movie({ canvas })
        movie
          // add an image layer using a URL as its source
          .addLayer(new etro.layer.Image({
            startTime: 0,
            duration: 2,
            source: 'https://pvanderlaat.com/clubfinity.png'
          }))
          // add a video layer at 0s in the timeline
          .addLayer(new etro.layer.Video({
            startTime: 2.5,
            source: video
          }))
          .play()

        // FOR TESTING issue#8 (don't delete):
        // movie.setCurrentTime(1);
        // movie.play();
      }
    })
  </script>
</body>
</html>
